<template>
  <div class="container">
    <div class="wrapper">
      <div
        class="blog-bg"
        :style="{
          'background-image': 'url(' + userInfo.homeBgUrl + ')',
          'background-repeat': 'no-repeat',
          'background-size': 'cover',
          'background-attachment': 'scroll',
          'background-position': 'center center',
        }"
      >
        <div class="poto">
          <img :src="userInfo.avatar" alt="" srcset="" />
        </div>
        <div class="column">
          <span>{{ text }}</span>
        </div>
      </div>
      <div class="blog-info">
        <div class="info-wra">
          <div class="title-column">
            <div class="title-text">
              <span> 个人信息 </span>
            </div>
          </div>
          <div class="column first-column">
            <span>昵称：</span>
            <p>{{ userInfo.nick }}</p>
          </div>
          <div class="column">
            <span>性别：</span>
            <p>{{ userInfo.sex }}</p>
          </div>
          <div class="column">
            <span>年龄：</span>
            <p>{{ userInfo.age }}</p>
          </div>
          <div class="column">
            <span>联系方式：</span>
            <p>{{ userInfo.phone }}</p>
          </div>
          <div class="column">
            <span>邮箱：</span>
            <p>{{ userInfo.email }}</p>
          </div>
          <div class="column">
            <span>个人签名 ：</span>
            <p>{{ userInfo.signature }}</p>
          </div>
          <div class="column">
            <span>个人简介：</span>
            <p>{{ userInfo.synopsis }}</p>
          </div>
        </div>
      </div>
      <div class="blog-project">
        <div class="project-wrap">
          <div class="title-column">
            <div class="title-text">
              <span> 项目列表 </span>
            </div>
          </div>
          <div
            class="project-main"
            v-for="(item, index) in projectList"
            :key="index"
          >
            <div class="main-left" @click="oponProjectLink(item.link)">
              <img :src="item.url" alt="" srcset="" />
            </div>
            <div class="main-right">
              <div class="right-label">
                <span>项目名称：</span>
                <p>
                  <span
                    class="label-name"
                    @click="oponProjectLink(item.link)"
                    >{{ item.name }}</span
                  >
                </p>
              </div>
              <div class="right-label">
                <span>项目类型：</span>
                <p>{{ item.type }}</p>
              </div>
              <div class="right-label">
                <span>项目周期：</span>
                <p>{{ item.cycle }}</p>
              </div>
              <div class="right-label">
                <span>项目描述：</span>
                <p>{{ item.des }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="blog-works">
        <div class="works-wra">
          <div class="title-column">
            <div class="title-text">
              <span> 作品推荐 </span>
              <img src="@/assets/images/hot.svg" alt="" srcset="" />
            </div>
            <span class="title-more" @click="gotoMyWorks">更多></span>
          </div>
          <div class="con">
            <div class="box" v-for="item in hotWorksTypeList" :key="item.id">
              <div class="poto" @click="gotoWorksDetail(item.id)">
                <img :src="item.url" alt="" srcset="" />
              </div>
              <div class="des">
                <span @click="gotoWorksDetail(item.id)">
                  {{ item.name }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="blog-diary">
        <div class="diary-wra">
          <div class="title-column">
            <div class="title-text">
              <span> 博客推荐 </span>
              <img src="@/assets/images/hot.svg" alt="" srcset="" />
            </div>
            <span class="title-more" @click="gotoMyDiary">更多></span>
          </div>
          <div class="bg">
            <img :src="userInfo.diaryUrl" alt="" srcset="" />
          </div>
          <div class="con">
            <div class="dia-nav">
              <div class="item" @click="getAllHotDiaryTypeList">
                <span>全部</span>
              </div>
              <div
                class="item"
                v-for="(item, index) in hotDiaryTypeList"
                :key="index"
                :class="activediaryType == index ? 'active-diary-type' : ''"
                @click="getHotDiaryTypeList(item.id, index)"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
            <div class="dia-list" v-if="hotDiaryList.length > 0">
              <div class="content" v-for="item in hotDiaryList" :key="item.id">
                <div class="content-title">
                  <span @click="gotoDiaryDetail(item.id)">
                    {{ item.name }}
                  </span>
                </div>
                <div class="sub-title">副标题：{{ item.title }}</div>
                <div class="content-time">发布日期：{{ item.createTime }}</div>
                <p><span @click="gotoDiaryDetail(item.id)">阅读正文</span></p>
              </div>
              <div
                class="load"
                v-loading="loading"
                element-loading-text="加载中..."
              >
                <p
                  v-if="
                    currentPage < Math.ceil(totalPage / pageSize) && !loading
                  "
                  @click="loadMore"
                >
                  加载更多
                </p>
              </div>
            </div>
            <div class="dia-not-list" v-else>暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import router from "@/router";
import {
  getUserInfo,
  getHotWorksType,
  getHotDiaryType,
  getHotDiary,
  getProjectList,
} from "@/api/index";

const loading = ref(false);
const pageSize = ref(5);
const totalPage = ref(null);
const currentPage = ref(1);
const userInfo = reactive({
  nick: "",
  sex: "",
  age: 0,
  email: "",
  phone: 0,
  motto: "",
  signature: "",
  synopsis: "",
  avatar: "",
  homeBgUrl: "",
  diaryUrl: "",
});
const text = ref("");
const srtIndex = ref(0);
const timer = ref(0);
const hotWorksTypeList = ref([]);
const hotDiaryTypeList = ref([]);
const hotDiaryList = ref([]);
const projectList = ref([]);
const diaryTypeId = ref();
const activediaryType = ref(null);

const initUserInfo = async () => {
  const res = await getUserInfo();
  if (res) {
    userInfo.nick = res[0].nick;
    userInfo.sex = res[0].sex;
    userInfo.age = res[0].age;
    userInfo.email = res[0].email;
    userInfo.phone = res[0].phone;
    userInfo.motto = res[0].motto;
    userInfo.signature = res[0].signature;
    userInfo.synopsis = res[0].synopsis;
    userInfo.avatar = res[0].avatar;
    userInfo.homeBgUrl = res[0].homeBgUrl;
    userInfo.diaryUrl = res[0].diaryUrl;
    localStorage.setItem("diaryUrl", userInfo.diaryUrl);
  }
};

const typeing = () => {
  if (userInfo.motto && srtIndex.value <= userInfo.motto.length) {
    text.value = userInfo.motto.slice(0, srtIndex.value++);
    timer.value = setTimeout(() => {
      typeing();
    }, 150);
  } else {
    clearTimeout(timer.value);
  }
};
// 初始化获取热门的作品类型
const initHotWorksType = async () => {
  const res = await getHotWorksType();
  if (res) {
    hotWorksTypeList.value = res;
  }
};
const initHotDiaryType = async () => {
  const res = await getHotDiaryType();
  if (res) {
    hotDiaryTypeList.value = res;
  }
};
const getAllHotDiaryTypeList = () => {
  diaryTypeId.value = undefined;
  currentPage.value = 1;
  hotDiaryList.value = [];
  totalPage.value = null;
  activediaryType.value = null;
  initHotDiary();
};
const timestampToTime = (timestamp) => {
  if (timestamp === 0 || timestamp == null) {
    return "";
  } else {
    var date = new Date(timestamp);
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D =
      date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
    var H = date.getHours() + ":";
    var M2 =
      (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
      ":";
    var S =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return Y + M + D + H + M2 + S;
  }
};
const initHotDiary = async () => {
  const res = await getHotDiary(
    currentPage.value,
    pageSize.value,
    diaryTypeId.value
  );
  if (res && res.worksList.length > 0) {
    totalPage.value = res.totalNumber;
    res.worksList.forEach((item) => {
      item.createTime = timestampToTime(Number(item.createTime));
      hotDiaryList.value.push(item);
      loading.value = false;
    });
  } else {
    loading.value = false;
  }
};

const getHotDiaryTypeList = async (id: number, index: number) => {
  diaryTypeId.value = id;
  activediaryType.value = index;
  currentPage.value = 1;
  hotDiaryList.value = [];
  totalPage.value = null;
  initHotDiary();
};

const initProjectList = async () => {
  const res = await getProjectList();
  if (res) {
    projectList.value = res;
  }
};

const loadMore = () => {
  currentPage.value++;
  loading.value = true;
  setTimeout(() => {
    initHotDiary();
  }, 1000);
};

const oponProjectLink = async (link: string) => {
  window.open(link, "_blank"); // 新窗口打开外链接
};
const gotoWorksDetail = (id: number) => {
  router.push(`/worksDetail/${id}`);
};

const gotoDiaryDetail = (id: number) => {
  router.push(`/diaryDetail/${id}`);
};

const gotoMyDiary = () => {
  router.push(`/diary`);
};
const gotoMyWorks = () => {
  router.push(`/works`);
};
onMounted(async () => {
  await initUserInfo();
  await initProjectList();
  await initHotWorksType();
  await initHotDiaryType();
  await initHotDiary();
  await typeing();
});
</script>

<style lang="scss" scoped>
@import "./MyHome.scss";
</style>
